<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
  >
    <div class="line-box">
      <div class="line-title">姓名：</div>
      <el-input v-model="searchParams.name" />
    </div>
    <div class="line-box">
      <div class="line-title">用户名：</div>
      <el-input v-model="searchParams.username" />
    </div>
    <div class="line-box">
      <div class="line-title">性别：</div>
      <el-select v-model="searchParams.sex" placeholder="请选择">
        <el-option
          v-for="item in sexArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="line-box">
      <div class="line-title">手机号：</div>
      <el-input v-model="searchParams.phone" />
    </div>
    <div class="line-box">
      <div class="line-title">身份证号：</div>
      <el-input v-model="searchParams.idNumber" />
    </div>
    <div class="line-box">
      <div class="line-title">头像：</div>
      <el-upload
        class="avatar-uploader"
        :action="`${bast_url}/admin/common/upload`"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="headers"
      >
        <img
          v-if="searchParams.avatar"
          :src="searchParams.avatar"
          class="avatar"
        />
        <i v-else class="add-icon el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- <div class="line-box">
      <div class="line-title">状态：</div>
      <el-switch
        v-model="searchParams.status"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="comfire">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import { updateUser } from "@/api/login.js";
const bast_url = window.SITE_CONFIG["apiURL"];
import { mapState, mapGetters } from "vuex";
export default {
  props: {
    status: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      bast_url,
      headers: {
        token: Cookies.get("token"),
      },
      sexArr: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      searchParams: {
        //
        name: "",
        username: "",
        phone: "",
        sex: "",
        avatar: "",
        idNumber: "",
        // status: true, //1启用 0禁用
      },
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.status;
      },
      set(val) {
        this.$emit("update:status", val);
      },
    },
    ...mapGetters({
      userInfo: "user/userInfo",
    }),
  },
  watch: {
    status: {
      handler(newVal) {
        if (newVal) {
          this.resetData();
          Object.entries(this.searchParams).forEach((valArr) => {
            this.searchParams[valArr[0]] = this.userInfo[valArr[0]];
            // if (valArr[0] == "status") {
            //   this.searchParams.status =
            //     this.userInfo.status == 1 ? true : false;
            // }
          });
        }
      },
    },
  },
  methods: {
    resetData() {
      Object.assign(this.$data, this.$options.data());
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.searchParams.avatar = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    async comfire() {
      const {
        name,
        username,
        phone,
        avatar,
        sex,
        // status,
        idNumber,
      } = this.searchParams;
      const params = {
        id: this.userInfo.id,
        name,
        username,
        phone,
        sex,
        avatar,
        idNumber,
        // status: status ? 1 : 0, //1启用 0禁用
      };
      const { code } = await updateUser(params);
      if (code == 200) {
        this.$emit("update:status", false);
        this.$emit("ok");
        this.$store.dispatch("user/get_userInfo");
      }
    },
    /**
     * 点击右上角的关闭按钮
     * @param {*} done 函数控制是否关闭
     */
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
  }
  .avatar {
    width: 100px;
    height: 100px;
  }
  .add-icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.line-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .line-title {
    width: 70px;
  }
}
</style>
